<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app" style="overflow: hidden;">
			<!-- 租赁汽车 -->
			<el-dialog :visible.sync="visible2" title="租赁汽车" width="40%">
			  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			    <el-form-item label="出租单号">
			      <el-input v-model="ruleForm.rentid" readOnly></el-input>
			    </el-form-item>
			    <el-form-item label="起租时间">
			      <el-input v-model="ruleForm.begindate" readOnly></el-input>
			    </el-form-item>
				<el-form-item label="还车时间" prop="returndate">
				  <el-date-picker
					v-model="ruleForm.returndate"
					type="datetime"
					placeholder="选择日期时间"
					align="right"
					:picker-options="pickerOptions">
				  </el-date-picker>
				</el-form-item>
				<el-form-item label="身份证号">
				  <el-input v-model="ruleForm.identity" readOnly></el-input>
				</el-form-item>
				<el-form-item label="客户姓名">
				  <el-input v-model="ruleForm.opername" readOnly></el-input>
				</el-form-item>
				<el-form-item label="车牌号">
				  <el-input v-model="ruleForm.carnumber" readOnly></el-input>
				</el-form-item>
				<el-form-item label="出租价格">
				  <el-input v-model="ruleForm.price" readOnly></el-input>
				</el-form-item>
			   <el-form-item>
			     <el-button type="primary" @click="rentForm('ruleForm')">提交</el-button>
			   </el-form-item>
			  </el-form>
			</el-dialog>
			
			
			<div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
					<el-form :model="searchRuleForm" ref="searchRuleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item prop="identity" label="身份证号：" style="margin-left: -15px;">
							<el-input v-model="searchRuleForm.identity" placeholder="请输入身份证号" style="width: 230px;float: left"></el-input>
							<el-button type="primary" icon="el-icon-search" style="float: left;position: relative;left: 20px;" @click="submitForm()">搜索</el-button>
							<el-button type="warning" icon="el-icon-refresh-right" style="position: relative;left: 22px;" @click="resetForm('searchRuleForm')">重置</el-button>
						</el-form-item>
					</el-form>
					<el-table
						:data="tableData"
						border
						stripe
						v-if="visible1"
						style="width: 100%;">
						<el-table-column
								fixed
								prop="carnumber"
								label="车牌号"
								width="120">
						</el-table-column>
						<el-table-column
								prop="cartype"
								label="车辆类型"
								width="80">
						</el-table-column>
						<el-table-column
								prop="color"
								label="车辆颜色"
								width="80">
						</el-table-column>
						<el-table-column
								prop="price"
								label="车辆价格"
								width="100">
						</el-table-column>
						<el-table-column
								prop="rentprice"
								label="出租价格"
								width="100">
						</el-table-column>
						<el-table-column
								prop="deposit"
								label="出租押金"
								width="100">
						</el-table-column>
						<el-table-column
								label="出租状态"
								width="80">
							<template slot-scope="scope">
						　　　　<font v-if="scope.row.isrenting == 0">未出租</font>
							   <font  v-if="scope.row.isrenting == 1">已出租</font>
						　　</template>
						</el-table-column>
						<el-table-column
								prop="description"
								label="车辆描述"
								width="130">
						</el-table-column>
						<el-table-column 
								label="缩略图" 
								width="90" 
								align="center">
							<template slot-scope="scope">
							  <el-image :src="scope.row.carimg" style="height:50px" title="点击查看大图" :preview-src-list="[scope.row.carimg]" />
							</template>
						  </el-table-column>
						<el-table-column
								prop="createtime"
								label="创建时间"
								width="180">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button
										size="mini"
										type="success"
										icon="el-icon-top-right"
										@click="rent(scope.row)">租赁汽车</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="margin-top: 20px;float: right;"
								   background
								   layout="prev, pager, next"
								   :page-size="pageSize"
								   :total="total"
								   v-if="visible1"
								   :current-page.sync="currentPage"
								   @current-change="page">
					</el-pagination>
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data(){
				return {
					tableData:null,
					pageSize:5,
					total:null,
					currentPage:1,
					searchRuleForm: {
					  identity:''
					},
					visible1:false,
					visible2:false,
					ruleForm: {
					  rentid:'',
					  price:'',
					  begindate:'',
					  returndate:'',
					  identity:'',
					  opername:'',
					  carnumber:''
					},
					rules: {
					  returndate: [{required: true, message: '请选择还车日期', trigger: 'blur'}]
					},
					pickerOptions: {
					  shortcuts: [{
						text: '明天',
						onClick(picker) {
						  const date = new Date();
						  date.setTime(date.getTime() + 3600 * 1000 * 24);
						  picker.$emit('pick', date);
						}
					  }, {
						text: '三天后',
						onClick(picker) {
						  const date = new Date();
						  date.setTime(date.getTime() + 3600 * 1000 * 24 * 3);
						  picker.$emit('pick', date);
						}
					  }
					  , {
						text: '一周后',
						onClick(picker) {
						  const date = new Date();
						  date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
						  picker.$emit('pick', date);
						}
					  }]
					},
				}
			},
			methods:{
				resetForm(formName) {
				  this.$refs[formName].resetFields();
				},
				submitForm() {
					const _this = this
					//让翻页复原
					_this.currentPage=1
					axios.get('http://localhost:8181/car/rentList?identity='+_this.searchRuleForm.identity+'&page='+_this.currentPage+'&limit='+_this.pageSize).then(function (resp) {
						if(resp.data.code == -1){
							_this.$alert(resp.data.msg, '提示', {
								confirmButtonText: '确定',
								callback: action => {
									_this.visible1 = false
									_this.tableData = ''
									_this.total = ''
								}
							});
						} else {
							_this.visible1 = true
							_this.tableData = resp.data.data
							_this.total = resp.data.count
						}
					})
				},
				page(currentPage){
					const _this = this
					axios.get('http://localhost:8181/car/rentList?identity='+_this.searchRuleForm.identity+'&page='+currentPage+'&limit='+_this.pageSize).then(function (resp) {
						_this.tableData = resp.data.data
						_this.total = resp.data.count
					})
				},
				rent(row){
					this.visible2 = true
					const _this = this
					axios.get('http://localhost:8181/rent/initRentFrom?identity='+_this.searchRuleForm.identity).then(function (resp) {
						_this.ruleForm.rentid = resp.data.rentid
						_this.ruleForm.begindate = resp.data.begindate
						_this.ruleForm.opername = resp.data.opername
						_this.ruleForm.price = row.rentprice
						_this.ruleForm.identity = _this.searchRuleForm.identity
						_this.ruleForm.carnumber = row.carnumber
					})
				},
				rentForm(formName) {
					this.$refs[formName].validate((valid) => {
					  if (valid) {
						let _this = this
						var formattedDate = formatDate(_this.ruleForm.returndate);
						_this.ruleForm.returndate = formattedDate
						axios.post('http://localhost:8181/rent/add',_this.ruleForm).then(function (response) {
							if(response.data.code == 0){
								_this.$alert(response.data.msg, '提示', {
									confirmButtonText: '确定',
									callback: action => {
										location.reload()
									}
								});
							} else {
								_this.$alert(response.data.msg, '提示', {
									confirmButtonText: '确定'
								});
							}
						})
					  } else {
						console.log('error submit!!');
						return false;
					  }
					});
				  }
			}
		})
		function formatDate(date) {
		  function padZero(num) {
		    return num < 10 ? '0' + num : num;
		  }
		 
		  var year = date.getFullYear();
		  var month = padZero(date.getMonth() + 1);
		  var day = padZero(date.getDate());
		  var hours = padZero(date.getHours());
		  var minutes = padZero(date.getMinutes());
		  var seconds = padZero(date.getSeconds());
		 
		  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		}
	</script>
</html>
